1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
import Head from "next/head";
import Footer from "../../components/footer";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { useAniList } from "../../lib/useAnilist";
import Image from "next/image";
export default function Categories() {
const router = useRouter();
const { id } = router.query;
const tags = id?.replace(/-/g, " ");
const { aniAdvanceSearch } = useAniList();
const [data, setData] = useState();
const [season, setSeason] = useState("");
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
if (tags === "This Season") {
seasonNow();
setLoading(false);
} else if (tags === "Popular Anime") {
PopularAnime();
setLoading(false);
} else if (tags === "Popular Manga") {
PopularManga();
setLoading(false);
} else {
setData(null);
setLoading(false);
}
}, [id]);
async function seasonNow() {
const data = await aniAdvanceSearch({
perPage: 25,
seasonYear: 2023,
season: getCurrentSeason(),
// type: "MANGA",
});
setData(data);
}
async function PopularAnime() {
const data = await aniAdvanceSearch({
perPage: 25,
sort: ["POPULARITY_DESC"],
});
setData(data);
}
async function PopularManga() {
const data = await aniAdvanceSearch({
perPage: 25,
sort: ["POPULARITY_DESC"],
type: "MANGA",
});
setData(data);
}
console.log(data);
return (
<>
<Head>
<title>Categories - {tags}</title>
</Head>
<div className="flex-center min-h-screen w-screen">
<div className="grid-container bg-white">
{loading ? (
<p>Loading...</p>
) : (
data &&
data?.media.map((m) => {
return (
<div key={m.id} className="grid-item h-[265px] w-[185px]">
<Image
src={m.coverImage.extraLarge}
alt="image"
width={500}
height={500}
className="object-cover h-[265px] w-[185px]"
/>
</div>
);
})
)}
</div>
</div>
<Footer />
</>
);
}
function getYear() {
const now = new Date();
return now.getFullYear();
}
function getCurrentSeason() {
const now = new Date();
const month = now.getMonth() + 1; // getMonth() returns 0-based index
switch (month) {
case 12:
case 1:
case 2:
return "WINTER";
case 3:
case 4:
case 5:
return "SPRING";
case 6:
case 7:
case 8:
return "SUMMER";
case 9:
case 10:
case 11:
return "FALL";
default:
return "UNKNOWN SEASON";
}
}
|